<template>
  <div class="decision" :class="fullScreen?'decision-wrapper':''">
    <div class="nav-top" :class="leftAnimate" :style="{width:navWidth+ 'px',top:top+'px'}">
      <div class="nav-top-container">
        <h2 class="nav-top-title">职业供求分析</h2>
        <div class="top-operate">
          <svg class="all-close-btn icon-svg" v-if="!fullScreen" @click="closeAll" viewBox="0 0 612 792">
            <path :d="svgPath.closeFullScreen"/>
          </svg>
        </div>
      </div>
    </div>
    <div class="chart-item new-chart-container" v-if="!isGoOther">
      <div id="supplyAnalysis" class="chart-item new-chart-item">
        <SupplyAnalysis :isChange="isChange"
                        :fullScreen="fullScreen"
                        :isCollapse="isCollapse">
        </SupplyAnalysis>
      </div>
      <div id="laborDemand" class="chart-item new-chart-item" style="margin-top: 10px" v-if="!isGoOther">
        <LaborDemand :isChange="isChange"
                     :fullScreen="fullScreen"
                     :isCollapse="isCollapse">
        </LaborDemand>
      </div>
      <div class="chart-item new-chart-item" style="margin-top: 10px" v-if="!isGoOther">
        <JobSeekersAnalysis
          :isChange="isChange"
          :fullScreen="fullScreen"
          :isCollapse="isCollapse">
        </JobSeekersAnalysis>
      </div>
      <!--简直就业-->
      <div class="chart-item new-chart-item" style="margin-top: 10px" v-if="!isGoOther">
        <part-time-job></part-time-job>
      </div>
    </div>
  </div>
</template>

<script>
  import {svgPath, quitFullScreen} from "../../assets/js/utils";

  import SupplyAnalysis from "./occupational-supply-component/supply-analysis"
  import LaborDemand from "./occupational-supply-component/labor-demand"
  import JobSeekersAnalysis from "./occupational-supply-component/job-seekers-analysis"

  /*简直就业表*/
 import partTimeJob from "./detail/part-time-job";


  export default {
    props: ['isChange', 'fullScreen', 'isCollapse', 'pageChange'],
    data () {
      return {
        reportName: '2018年度新增就业人员分析',
        leftAnimate: '',
        svgPath: svgPath,
        navWidth: 800,
        top: 70,
        height: 500,
        isGoOther: false,
        currentIndex: 0,
      }
    },
    components: {
      SupplyAnalysis,
      LaborDemand,
      JobSeekersAnalysis,
      partTimeJob
    },
    watch: {
      isChange () {
        setTimeout(() => {
          this.getChartItem();
        }, 400)
      },
      pageChange () {
        this.isGoOther = true;
        this.isGoOther = false;
        this.currentIndex = 0;
      },
    },
    activated () {
      this.currentIndex = sessionStorage.getItem('isPrev');
      this.scrollIndex(this.currentIndex);
      sessionStorage.setItem('isPrev','null');
    },
    mounted () {
      setTimeout(() => {
        this.getChartItem();
      }, 300)
    },
    methods: {
      scrollIndex (index) {
        let heigth = 0;

        if (index == 1) {
          heigth = document.querySelector('#supplyAnalysis').clientHeight;
        } else if (index == 2) {
          heigth = document.querySelector('#supplyAnalysis').clientHeight;
          heigth += 10;
          heigth += document.querySelector('#laborDemand').clientHeight;
        } else {
          return;
        }
        document.querySelector('.el-main').scrollTop = heigth;
      },
      closeAll () {
        quitFullScreen();
      },
      //动态设置宽高
      getChartItem () {
        let height = document.querySelector('body').clientHeight;
        let barHeight = 70;
        let sideWidth = 44;
        let bodyWidth = document.querySelector('body').clientWidth;
        let top = 70;
        if (document.querySelector('.el-header')) {
          barHeight = document.querySelector('.el-header').clientHeight;
          if (document.querySelector('.el-aside')) {
            sideWidth = document.querySelector('.el-aside').clientWidth;
          }
        } else {
          barHeight = 0;
          sideWidth = 0;
          top = 0;
        }
        this.top = top;
        this.left = sideWidth;
        this.navWidth = bodyWidth - sideWidth;
        this.height = height - barHeight - 54;
        //每一个图表块的宽度
        let width = 1000;
        if (document.querySelector('.chart-box')) {
          width = document.querySelector('.chart-box').clientWidth;
        }
        this.width = (width - 44) / 2;
        //nav-top left值
        if (this.myChart5) {
          setTimeout(() => {
            this.myChart5.resize();
            this.resizeChart();
          }, 100)
        }
      },
    },
    beforeRouteLeave (to, from, next) {
      console.log(to,2323232323)
      if (to.name == 'detail') {
        this.isGoOther = false;
      } else {
        this.isGoOther = true;
      }
      next()
    },
  }
</script>
<style scoped>
  @import '../../assets/css/decision.css';

  .new-chart-container {
    padding: 60px 12px 15px 12px;
    box-sizing: border-box;
    width: 100%;
  }

  .new-chart-item {
    width: 100%;
    background: #1b2b44;
    box-sizing: border-box;
    border-bottom: solid 1px #1d2027;
    padding: 0;
  }
</style>
